<template>
  <div class="about">
    <at-button v-if="debug" @click="showData(chartData)">
      <i class="icon icon-align-center" /> this page data
    </at-button>
    <div id="myChart311" :style="{width: '900px', height: '550px'}"></div>
    <div>
      <div v-if="top2Growth">
        <span>总量前二单位：</span>
        <at-tag color v-for="(item,index) in top2Growth" :key="index">{{item.name}}({{item.value}})</at-tag>
      </div>
    </div>
     <input
      class="hdbtn"
      type="button"
      id="btn888"
      @click="downloadImpByChart()"
      value="保存为图片"
    />
  </div>
</template>
<style scoped>
</style>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "hello",
  data() {
    return {
      chartData: [],
      viewData: []
    };
  },
  computed: {
    ...mapState(["cookies", "debug"])
  },
  mounted() {
    this.updateCookies();
    this.chartData = this.cookies.chart31.data;
    this.drawLine();
  },
  methods: {
    ...mapMutations(["updateCookies"]),
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart311 = this.$echarts.init(
        document.getElementById("myChart311")
      );
      // let colors = [
      //   "red",
      //   "red",
      //   "Orange",
      //   "Orange",
      //   "green",
      //   "green",
      //   "green",
      //   "green",
      //   "green",
      //   "green"
      // ];

      for (let y = 0; y < this.chartData.length; y++) {
        const element = this.chartData[y];
        this.viewData.push({
          name: element.name + "\n\n检控量:" + element.totalNum,
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [
                {
                  offset: 1,
                  color: this.getcolor(element.value) // 0% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          },
          value: element.totalNum
        });
        // console.log(element);
      }
      var option = {
        calculable: false,
        grid: {
          left: "0",
          right: "0",
          top: 0
        },
        title: {
          text: this.cookies.chart31.title,
          textStyle: {
            fontSize:'26',
            fontFamily:'FZXBSJW',
          }
          // top:'-1%'
        },
        series: [
          {
            type: "treemap",
            left: "0",
            right: "0",
            top: "5%",
            bottom: "o",
            label: {
              show: true,
              formatter: "{b}",
              fontSize: 16,
              ellipsis: true
            },
            breadcrumb: {
              show: false
            },
            itemStyle: {
              normal: {
                //borderColor: '#EFEFEF',
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#F8F8F8" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#EFEFEF" // 100% 处的颜色
                    }
                  ],
                  // globalCoord: false // 缺省为 false
                },
                borderWidth: 8,
                shadowColor: "#18AEF9",
                shadowOffsetX: 1,
                shadowOffsetY: 1,
                shadowBlur: 1
              }
            },
            data: this.viewData,
            roam: false,
            nodeClick: false
            // breadcrumb: { show: false }
          }
        ]
      };

      // 绘制图表
      myChart311.setOption(option);
    },
    showData(jsondata) {
      this.$Modal.alert({ content: jsondata });
    },
   
    downloadImpByChart(){
      this.common.saveChart(this.$echarts.getInstanceByDom(document.getElementById('myChart311')),this.cookies.chart311.title)
    }
  }
};
</script>
<style scoped>
.about {
  margin-top: 0rem;
}
#myChart311 {
  margin: 0 auto;
}
</style>